import { Canvas, Meta, Source } from '@storybook/blocks'

import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
import * as CommandStories from './command.stories'

<Meta of={CommandStories} />

<PrimitiveDocsButton docsUrl='https://cmdk.paco.me/' />

# Command

Fast, composable, unstyled command menu for React.

## Preview

<Canvas of={CommandStories.Default} />

## About

The `<Command />` component uses the [cmdk](https://cmdk.paco.me/) component by [pacocoursey](https://twitter.com/pacocoursey).

## Usage

export const importCode = `import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@orbitkit/ui/command";`

export const usageCode = `<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Examples

### Dialog

<Canvas of={CommandStories.Dialog} />
